<template>
  <div class="login-container">
    <!-- 登录页面背景 -->
    <div class="background-decoration"></div>
    
    <div class="login-box">
      <!-- 应用logo和标题 -->
      <div class="login-header">
        <div class="logo">
          <i class="el-icon-food"></i>
        </div>
        <h2 class="login-title">校园外卖平台</h2>
        <p class="login-subtitle">美食随时送到你身边</p>
      </div>
      
      <!-- 登录表单 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px">
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            prefix-icon="el-icon-user" 
            placeholder="请输入用户名"
            :clearable="true">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            prefix-icon="el-icon-lock" 
            placeholder="请输入密码" 
            show-password>
          </el-input>
        </el-form-item>
        
        <!-- 记住我选项 -->
        <el-form-item>
          <div class="remember-forgot">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
           
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleLogin" class="login-button">
            <i class="el-icon-right" v-if="!loading"></i>
            登录
          </el-button>
        </el-form-item>
        
        <!-- 额外选项 -->
        <div class="login-options">
          <span>还没有账号?</span>
          <el-link type="primary" @click="goToRegister" class="register-link">立即注册</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'
import { getUrlParam } from '@/utils'

export default {
  name: 'Login',
  data() {
    return {
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      // 表单验证规则
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      },
      // 登录按钮加载状态
      loading: false,
      // 重定向地址
      redirect: null,
      // 记住我选项
      rememberMe: false
    }
  },
  created() {
    // 获取重定向地址
    this.redirect = getUrlParam('redirect')
    // 检查本地存储中是否有保存的用户名
    const savedUsername = localStorage.getItem('remembered_username')
    if (savedUsername) {
      this.loginForm.username = savedUsername
      this.rememberMe = true
    }
  },
  methods: {
    // 处理登录
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          
          // 如果选择了记住我，保存用户名到本地存储
          if (this.rememberMe) {
            localStorage.setItem('remembered_username', this.loginForm.username)
          } else {
            localStorage.removeItem('remembered_username')
          }
          
          // 调用登录API
          login(this.loginForm).then(response => {
            if (response.code === 200) {
              // 登录成功，保存用户信息
              this.$store.commit('SET_USER_INFO', response.data)
              this.$message({
                message: '登录成功，欢迎回来！',
                type: 'success',
                duration: 2000
              })
              
              // 根据用户角色跳转到不同页面
              if(response.data.user.role === 3){
                this.$router.push('/admin/dashboard')
              }else if(response.data.user.role === 2){
                this.$router.push('/merchant/dashboard')
              }else{
                this.$router.push('/')
              }
            } else {
              this.$message.error(response.message || '登录失败')
            }
          }).catch(error => {
            this.$message.error(error.response?.message || '登录失败，请稍后再试')
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    // 跳转到注册页
    goToRegister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>
/* 登录页面容器 */
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: linear-gradient(45deg, #409EFF20, #67C23A20);
  transform: rotate(-45deg);
  z-index: 0;
}

/* 登录框 */
.login-box {
  width: 420px;
  padding: 40px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.login-box:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

/* 登录头部区域 */
.login-header {
  text-align: center;
  margin-bottom: 35px;
}

/* Logo样式 */
.logo {
  margin: 0 auto 15px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 35px;
  color: white;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.3);
}

/* 登录标题 */
.login-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #303133;
}

/* 登录副标题 */
.login-subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 0;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 45px;
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  border: none;
  transition: all 0.3s;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.4);
}

/* 记住我和忘记密码区域 */
.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

/* 登录选项区域 */
.login-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.login-options span {
  color: #606266;
  margin-right: 5px;
}

/* 注册链接 */
.register-link {
  font-weight: 500;
}

/* 忘记密码链接 */
.forgot-password {
  font-size: 14px;
}

/* 输入框样式优化 */
:deep(.el-input__inner) {
  height: 45px;
  line-height: 45px;
  border-radius: 4px;
}

:deep(.el-input__prefix) {
  left: 10px;
}

:deep(.el-input__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
}
</style> 